{extend name="index/public" /}

{block name="content"}
<form class="layui-form" action="" id="searchBox">
    <div class="layui-inline">
        <input type="text" name="date" value="{$date}" id="date" lay-verify="datetime" placeholder="创角时间" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-inline">
        <div class="layui-input-inline">
            {MyTag:channel type='manage' /}
        </div>
    </div>
    <div class="layui-inline">
        <div class="layui-input-inline">
            {MyTag:game type='manage' /}
        </div>
    </div>
    <div class="layui-inline">
        <input type="text" class="layui-input" id="my_user_id" placeholder="米娱登录ID">
    </div>
    <div class="layui-inline">
        <input type="text" name="server_id" value="" id="server_id" placeholder="区服ID/区服名称" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-inline">
        <input type="text" name="role_id" value="" id="role_id" placeholder="角色ID/角色名称" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-inline">
        <select name="sort" id="sort" lay-filter="sort">
            <option value="total_price" selected>金额排序</option>
            <option value="create_time">时间排序</option>
        </select>
    </div>
    <div class="layui-inline">
        <a href="javascript:;" class="layui-btn searchBtn my-btn my-btn-sm">搜索</a>
        <a href="javascript:;" class="layui-btn my-btn my-btn-sm" id="export">导出</a>
    </div>
</form>

<table id="tableBox" lay-filter="tableBox"></table>

<script type="text/html" id="tableBar">
    <a class="layui-btn my-btn layui-btn-sm" lay-event="pay">充值记录</a>
    <!--<a class="layui-btn my-btn layui-btn-sm" lay-event="login">登录记录</a>-->
</script>
{/block}

{block name="css"}
{/block}

{block name="js"}
<script>
    layui.use(['table', 'laydate'], function(){
        var table = layui.table
            ,$ = layui.$
            ,form = layui.form
            ,laydate = layui.laydate
            ,load = null
            ,active = {
                reload: function () {
                    var jsonObj = {
                        "date": $('#date').val()
                        ,"channel_id": $('#channel_id').val()
                        ,"game_id": $('#game_id').val()
                        ,"my_user_id": $('#my_user_id').val()
                        ,"server_id": $('#server_id').val()
                        ,"role_id": $('#role_id').val()
                        ,"sort": $('#sort').val()
                    };

                    table.reload('tableId', {
                        page: {curr: 1}
                        ,where: jsonObj
                        ,height: 'full-100'
                    })
                },
            };

        //表格初始化
        table.render({
            elem: '#tableBox'
            ,height: 'full-100'
            ,url: '{:url("InfoRole/index")}'
            ,page: true
            ,where: {date:$('#date').val(),sort:$('#sort').val()}
            ,limit:20
            ,limits:[20,40,60,80]
            ,loading:true
            ,id:'tableId'
            ,done: function () {
                layer.close(load);
                $('#layui-loading').hide();
            }
            ,cols: [[
                {field:'create_time', title: '创角时间', width: 160, sort:true}
                ,{field:'my_user_id', title: '米娱登录ID', width: 100}
                ,{field:'channel_id', title: '渠道ID', width: 90}
                ,{field:'channel_name', title: '渠道名称', width: 120}
                ,{field:'game_id', title: '游戏ID', width: 90}
                ,{field:'game_name', title: '游戏名称', width: 120}
                ,{field:'server_id', title: '区服ID', width: 90, sort:true}
                ,{field:'server_name', title: '区服名称', width: 140}
                ,{field:'role_id', title: '角色ID', width: 130}
                ,{field:'role_name', title: '角色名称', width: 140}
                ,{field:'level', title: '等级', width: 90, sort:true}
                ,{field:'vip', title: 'VIP', width: 90, sort:true}
                ,{field:'total_price', title: '充值金额', width: 120, sort:true}
                ,{title: '操作', align:'center', width: 130, toolbar:'#tableBar'}
            ]]
        });

        $('#searchBox .searchBtn').on('click', function(){
            load = layer.load();
            active['reload'].call(this);
            return false;
        });
        $('#export').click(function() {
            var jsonStr = ''
                ,jsonObj = {
                    "date": $('#date').val()
                    ,"channel_id": $('#channel_id').val()
                    ,"game_id": $('#game_id').val()
                    ,"my_user_id": $('#my_user_id').val()
                    ,"server_id": $('#server_id').val()
                    ,"role_id": $('#role_id').val()
                    ,"sort": $('#sort').val()
                    ,"export": true
            };

            layer.msg('导出中....', {icon: 1, time: 2000});
            for(k in jsonObj){
                jsonStr += k + '=' + jsonObj[k] + '&';
            }
            console.dir(jsonStr.substring(0, jsonStr.length-1));
            window.location.href = '{:url("InfoRole/index")}?'+jsonStr.substring(0, jsonStr.length-1);
        })

        //日期
        laydate.render({
            elem: '#date'
            ,type: 'date'
            ,range: true
            ,calendar: true
            ,min: '2016-01-01'
            ,max: 0
        });

        table.on('tool(tableBox)', function(obj){
            var data = obj.data
            console.dir(data);
            if(obj.event === 'pay'){
                var jsonStr = ''
                    ,jsonObj = {
                        "date": $('#date').val()
                        ,"channel_id": data.channel_id
                        ,"game_id": data.game_id
                        ,"my_user_id": data.my_user_id
                        ,"server_id": data.server_id
                        ,"role_id": data.role_id
                        ,"sort": $('#sort').val()
                    };
                for(k in jsonObj){
                    jsonStr += k + '=' + jsonObj[k] + '&';
                }
                layer.open({
                    type: 2
                    ,title: '充值记录'
                    ,resize: true
                    ,offset: '80px'
                    ,area: ['85%', '75%']
                    ,content: '{:url("InfoRole/pay")}?'+jsonStr.substring(0, jsonStr.length-1)
                });
            }
        });
    });
</script>
{/block}